/*
* @Description:可视化
* @Author: lil
* @Date: 2021/11/27
**/
<template>
  <div class="visual-wrapper">
    <div class="visual-hd">
      <el-row>
        <el-col :span="6">
          <span>{{currentDay}}</span>
          <span>{{currentTime}}</span>
        </el-col>
        <el-col :span="12">
          <img src="~@/assets/image/ksh-title.png" alt="">
        </el-col>
        <el-col :span="6">
          <ul class="clearfix">
            <li v-for="(item,idx) in dateData" :key="idx" :class="{active:selectedDate==idx}" @click="goDate(idx)">
              {{item}}</li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <div class="visual-bd">
      <el-row>
        <el-col :span="6">
          <div>
            <el-tooltip class="item" effect="light" content="当前区块链上的每个组织提交交易数量占总交易数量的比值" placement="bottom">
              <p class="subtitle">组织提交交易占比</p>
            </el-tooltip>
            <orga-submit-deal-pie-chart ref="orgpiechart"></orga-submit-deal-pie-chart>
          </div>
          <div>
            <el-tooltip class="item" effect="light" content="区块链上数据存储量或者数据查询量最多的前5种数据类型" placement="bottom">
              <p class="subtitle">数据交易情况Top5</p>
            </el-tooltip>
            <el-tabs v-model="activeName" @tab-click="tabExchange">
              <el-tab-pane label="数据存储量" name="first">
                <data-store-bar-chart :key="keyTimer+'store'" ref="dataStoreBar"></data-store-bar-chart>
              </el-tab-pane>
              <!-- <el-tab-pane label="数据查询量" name="second">
                <data-query-bar-chart :key="keyTimer+'query'" ref="dataQueryBar"></data-query-bar-chart>
              </el-tab-pane> -->
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="12">
          <el-carousel trigger="click" ref="carousel" height="150px" indicator-position="none" arrow="always"
            :autoplay="false">
            <el-carousel-item v-for="(elem,index) in statisticsNumber" :key="index+'elem'">
              <ul class="clearfix">
                <li v-for="(item, idx) in elem" :key="idx">
                  <div class="value">{{ item.value }}<span>个</span></div>
                  <el-tooltip class="item" effect="light" :content="item.note" placement="bottom">
                    <div class="name">{{ item.name }}</div>
                  </el-tooltip>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
          <el-tooltip class="item" effect="light" content="显示区块链上的所有节点，并展示出不同节点的数据存储量及数据查询量" placement="bottom">
            <p class="subtitle">节点数据展示图</p>
          </el-tooltip>
          <node-data-pie-chart ref="nodeDataPie"></node-data-pie-chart>
          <div class="distributeTime">
            <el-tooltip class="item" effect="light" content="区块链上所有节点的分布时长" placement="bottom">
              <p>不同节点分布时长</p>
            </el-tooltip>
            <node-distribution-bar-chart ref="nodeDistBar"></node-distribution-bar-chart>
          </div>
        </el-col>
        <el-col :span="6">
          <el-tooltip class="item" effect="light" content="当前区块链上的每个通道上提交的交易数量占总区块链交易数量的比值" placement="bottom">
            <p class="subtitle">通道区块比</p>
          </el-tooltip>
          <channel-block-pie-chart ref="channelDataPie"></channel-block-pie-chart>
          <el-tooltip class="item" effect="light" placement="bottom">
            <template slot="content">
              <div>交易量：展示今日不同时间段区块链上提交的交易数量<br>
                区块量：展示今日不同时间段区块链上产生的区块数量</div>
            </template>
            <p class="subtitle">交易折线图</p>
          </el-tooltip>
          <deal-line-chart ref="dealLineChart"></deal-line-chart>
        </el-col>
      </el-row>
    </div>
    <div class="visual-ft">
      <p class="subtitle">区块列表</p>
      <el-select class="channel-select" popper-class="select-down" v-model="channelType" @change="handleChannelList"
        placeholder="请选择通道">
        <el-option v-for="(item,idx) in channelArr" :key="idx" :label="item" :value="item">
        </el-option>
      </el-select>
      <el-table :data="tableData" @row-click="showBlockDetail" v-loading="isLoading" element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(20,36,91,0.7)" style="width: 100%">
        <template slot="empty">
          <p>{{dataText}}</p>
        </template>
        <el-table-column prop="blockId" label="区块ID" width="100" align="center">
        </el-table-column>
        <el-table-column prop="BlockHash" label="区块哈希" align="center">
        </el-table-column>
        <el-table-column prop="DataHash" label="数据哈希" align="center">
        </el-table-column>
        <el-table-column prop="blockTradeNumber" label="区块交易数" width="100" align="center">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15, 20]"
        :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 弹窗：区块信息 -->
    <el-dialog title="提示" class="blockInfoDialog" :close-on-click-modal="false" :visible.sync="dialogVisible"
      width="572px">
      <i class="close" @click="dialogVisible=false"></i>
      <block-info :cID='cID' :cChannel='cChannel' :cTime="cTime" :cPreviousID="cPreviousID"
        :cTransactionID="cTransactionID" :cCCName="cCCName" :cBlockData="cBlockData"></block-info>
      <!--      cHash:'',-->
      <!--      cTime:'',-->
      <!--      cPreviousID:'',-->
      <!--      cTransactionID:'',-->
      <!--      cCCName:'',-->
    </el-dialog>
  </div>
</template>
<script>
  import dataStoreBarChart from './blockchain/visualization/echarts/dataStoreBarChart'
  import dataQueryBarChart from './blockchain/visualization/echarts/dataQueryBarChart'
  import nodeDistributionBarChart from './blockchain/visualization/echarts/nodeDistributionBarChart'
  import dealLineChart from './blockchain/visualization/echarts/dealLineChart'
  import orgaSubmitDealPieChart from './blockchain/visualization/echarts/orgaSubmitDealPieChart'
  import nodeDataPieChart from './blockchain/visualization/echarts/nodeDataPieChart'
  import channelBlockPieChart from './blockchain/visualization/echarts/channelBlockPieChart'
  import blockInfo from './blockchain/visualization/blockInfo'
  import {
    getBlockInfoNew,
    getHeightInf,
    getChaincodeNumber,
    getNodeNumber,
    getTransactionNumber,
    getHeightBytime,
    ChannelList,
    blockNewPagesByChannel
  } from '@/api/blockchain/blockchainvisualization'
  export default {
    components: {
      dataStoreBarChart,
      dataQueryBarChart,
      nodeDistributionBarChart,
      dealLineChart,
      orgaSubmitDealPieChart,
      nodeDataPieChart,
      channelBlockPieChart,
      blockInfo
    },

    data() {
      return {
        dateData: ['全量', '本月', '本周', '今日'],
        dateDataE: ['all', 'month', 'week', 'day'],
        selectedDate: 0,
        currentDay: '',
        currentTime: '',
        activeName: 'first',
        keyTimer: '',
        pageSize: 5,
        pageNum: 1,
        total: null,
        tableData: [],
        tableDetail: [],
        statisticsNumber: [
          [{
              name: '区块高度',
              value: 0,
              note: '指生成了多少个区块，当前区块链上所有的区块总数'
            },
            {
              name: '合约数量',
              value: 0,
              note: '当前区块链上所有的合约总数'
            },
            {
              name: '节点数量',
              value: 0,
              note: '区块链上的所有节点总数'
            },
            {
              name: '交易数量',
              value: 0,
              note: '区块链上的总交易数量'
            }
          ]
        ],
        chooseBlock: '',
        cID: '',
        cHash: '',
        cTime: '',
        cPreviousID: '',
        cTransactionID: '',
        cCCName: '',
        cChannel: '',
        cBlockData: '',
        dialogVisible: false,
        timer1: null,
        channelType: '',
        channelArr: [],
        isLoading: false,
        dataText: '',
        currentChannel: ''
      };
    },
    mounted() {
      let _that = this;
      this.isLoading = true;
      if (this.timer1) {
        clearInterval(this.timer1);
      } else {
        this.timer1 = setInterval(() => {
          var date = this.dateDataE[this.selectedDate];
          this.getChaincodeNumber(date);
          this.getNode(date);
          this.getTransaction(date);
          this.getHeightBytime(date);
          this.$refs.orgpiechart.getDWMOrgTransactionInfo(date);
          this.$refs.nodeDataPie.getAllPeerInfo(date);
          this.$refs.channelDataPie.getChannelBlockInfo(date);
          this.$refs.dealLineChart.getAllInvokeBlockInfo();
          this.$refs.dataStoreBar.getAllInvokeInfo();
          this.$refs.dataQueryBar.getAllQueryInfo();
          this.$refs.nodeDistBar.getAllPeerTimeInfo();
          // this.getBlockInfList();
        }, 60000);
      }

      this.timer = setInterval(() => {
        _that.getCurrentTime()
      }, 1000);
      this.getChannelList();
      // this.getHeight();
      this.getChaincodeNumber(this.dateDataE[this.selectedDate]);
      this.getNode(this.dateDataE[this.selectedDate]);
      this.getTransaction(this.dateDataE[this.selectedDate]);
      this.getHeightBytime(this.dateDataE[this.selectedDate]);

    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      if (this.timer1) {
        clearInterval(this.timer1);
      }
    },
    // destory(){
    //   clearInterval(this.timer1);
    // },
    methods: {
      getChannelList() {
        ChannelList().then((res) => {
          this.channelArr = res.data;
          this.channelType = this.channelArr[0];
          this.getBlockInfList(this.channelType);
        })
      },
      handleChannelList(val) {
        this.pageNum = 1;
        this.getBlockInfList(val)
      },
      getHeight() {
        getHeightInf()
          .then((res) => {
            // this.blockHeight = res.data;
            this.total = res.data; //数据用于分页查询总数，'0'高度算在总数范围内
          })
          .catch(() => {});
      },
      getHeightBytime(date) {
        getHeightBytime(date)
          .then((res) => {
            // this.statisticsNumber.some((item, i) => {
            //   if (item.name == '区块高度' ){
            //     this.statisticsNumber[0].splice(i,1)
            //     return true;
            //   }
            // });
            // this.statisticsNumber.push({name: '区块高度',
            //   value: res.data,
            //   note:'指生成了多少个区块，当前区块链上所有的区块总数'});
            this.statisticsNumber[0].splice(0, 1, {
              name: '区块高度',
              value: res.data,
              note: '指生成了多少个区块，当前区块链上所有的区块总数'
            });
          })
          .catch(() => {});
      },
      getChaincodeNumber(date) {
        getChaincodeNumber(date)
          .then((res) => {
            this.statisticsNumber[0].splice(1, 1, {
              name: '合约数量',
              value: res.data,
              note: ' 当前区块链上所有的合约总数'
            });
            // this.statisticsNumber.some((item, i) => {
            //   if (item.name == '合约数量' ){
            //     this.statisticsNumber[0].splice(i,1)
            //     return true;
            //   }
            // });
            // this.statisticsNumber[0].push({name: '合约数量',
            //   value: res.data,
            //   note:'当前区块链上所有的合约总数'});

          })
          .catch((err) => {
            console.log(err);
          });
      },
      getNode(date) {
        getNodeNumber(date)
          .then((res) => {
            this.statisticsNumber[0].splice(2, 1, {
              name: '节点数量',
              value: res.data,
              note: '区块链上的所有节点总数'
            });

            // this.statisticsNumber[0].some((item, i) => {
            //   if (item.name == '节点数量' ){
            //     this.statisticsNumber[0].splice(i,1)
            //     return true;
            //   }
            // });
            // this.statisticsNumber[0].push({name: '节点数量',
            //   value: res.data,
            //   note:'区块链上的所有节点总数'});
          })
          .catch((err) => {
            console.log(err);
          });
      },
      getTransaction(date) {
        getTransactionNumber(date)
          .then((res) => {
            this.statisticsNumber[0].splice(3, 1, {
              name: '交易数量',
              value: res.data,
              note: '区块链上的总交易数量'
            });
            // this.statisticsNumber[0].some((item, i) => {
            //   if (item.name == '交易数量' ){
            //     this.statisticsNumber[0].splice(i,1)
            //     return true;
            //   }
            // });
            // this.statisticsNumber[0].push({name: '交易数量',
            //   value: res.data,
            //   note:'区块链上的总交易数量'});
          })
          .catch((err) => {
            console.log(err);
          });
      },

      goDate(idx) {
        this.selectedDate = idx;
        var date = this.dateDataE[idx];
        this.getChaincodeNumber(date);
        this.getNode(date);
        this.getTransaction(date);
        this.getHeightBytime(date);
        this.$refs.orgpiechart.getDWMOrgTransactionInfo(date);
        this.$refs.nodeDataPie.getAllPeerInfo(date);
        this.$refs.channelDataPie.getChannelBlockInfo(date);
      },
      getBlockInfList(val) {
        this.currentChannel = val;
        let _that = this;
        blockNewPagesByChannel(this.pageSize, this.pageNum, val).then(function (res) {
          _that.total = Number(res.msg);
          _that.tableData = [];
          for (let i = 0; i < res.data.length; i++) {
            _that.tableData.push({
              blockId: '',
              BlockHash: '',
              DataHash: '',
              blockTradeNumber: ''
            });
            _that.tableData[i].blockId = res.data[i].blockID;
            _that.tableData[i].BlockHash = res.data[i].blockHash;
            _that.tableData[i].DataHash = res.data[i].dataHash;
            // _that.tableData[i].channelName = res.data[i].channelName; channelName:'',
            _that.tableData[i].blockTradeNumber = res.data[i].envelopeCount;
            _that.tableDetail.push({
              blockId: '',
              channelName: '',
              tradeHour: '',
              previousHash: '',
              transactionID: '',
              chaincodeName: '',
              blockData: ''
            });
            _that.tableDetail[i].blockId = res.data[i].blockID;
            _that.tableDetail[i].channelName = res.data[i].channelName;
            _that.tableDetail[i].tradeHour = res.data[i].transactionTime;
            _that.tableDetail[i].previousHash = res.data[i].previousHashID;
            _that.tableDetail[i].transactionID = res.data[i].transactionID;
            _that.tableDetail[i].chaincodeName = res.data[i].chaincodeName;
            _that.tableDetail[i].blockData = res.data[i].blockData;
          }
          _that.isLoading = false;
          if (_that.tableData.length === 0) {
            _that.dataText = "暂无数据";
          }
        }).catch((err) => {
          console.log(err);
        });
      },

      getCurrentTime() {
        var date = new Date();
        this.currentDay = date.toLocaleDateString().replaceAll('/', '-');
        this.currentTime = date.toLocaleTimeString('chinese', {
          hour12: false
        });
      },
      /* 分页--页数 */
      handleSizeChange(val) {
        this.pageSize = val;
        this.getBlockInfList(this.currentChannel);
      },
      /* 分页--页码 */
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getBlockInfList(this.currentChannel);

      },
      tabExchange() {
        this.keyTimer = new Date().getTime();
      },
      showBlockDetail(row) {
        console.log(row, 'row');
        this.cID = row.blockId;
        this.dialogVisible = true;
        for (let i = 0; i < this.tableDetail.length; i++) {
          if (this.tableDetail[i].blockId == row.blockId) {
            this.cChannel = this.tableDetail[i].channelName;
            this.cTime = this.tableDetail[i].tradeHour;
            this.cPreviousID = this.tableDetail[i].previousHash;
            this.cTransactionID = this.tableDetail[i].transactionID;
            this.cCCName = this.tableDetail[i].chaincodeName;
            this.cBlockData = this.tableDetail[i].blockData;
            break;
          }
        }
      }
    },
  };

</script>
<style lang="scss" scoped>
  @font-face {
    font-family: ysbtH;
    src: url('~@/assets/styles/fonts/ysbtH.ttf');
  }

  .visual-wrapper {
    width: 100%;
    // height: 100%;
    padding: 15px 25px;
    background: url(~@/assets/image/ksh-bg.png) no-repeat;
    background-size: 100% 100%;

    .subtitle {
      font-size: 20px;
      color: #ebf2f7;
      margin: 0;
      display: inline-block;

      &::before {
        content: '';
        width: 5px;
        height: 22px;
        display: inline-block;
        border-radius: 5px;
        margin-bottom: -3px;
        margin-right: 15px;
        background-image: linear-gradient(to bottom, #5b3fe1, #3badf2);
      }
    }

    .visual-hd {
      width: 100%;
      height: 90px;


      .el-col:nth-child(1) {
        font-size: 22px;
        color: #fff;
        margin-top: 15px;
        font-family: ysbtH;
        padding-left: 20px;
      }

      .el-col:nth-child(2) {
        img {
          width: 402px;
          height: 35px;
          display: block;
          margin: 5px auto 0;
        }
      }

      .el-col:nth-child(3) {
        ul {
          padding: 0;
          display: flex;
          flex-flow: row-reverse;

          li {
            list-style: none;
            margin: 0;
            width: 91px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            float: left;
            margin-right: 10px;
            cursor: pointer;
            color: rgba(160, 193, 220, .5);
            background: url(~@/assets/image/ksh-menu-bg.png) no-repeat;
            background-size: 100% 100%;

            &.active {
              color: #87c8ff;
              background: url(~@/assets/image/ksh-menu-active-bg.png) no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }

    .visual-bd {
      padding-top: 15px;

      .el-tabs {
        &>>>.el-tabs__header {
          // width: 258px;
          width: 95px;
          margin: 10px auto;
        }

        &>>>.el-tabs__content {
          padding-left: 10px;
        }

        &>>>.el-tabs__nav-wrap {
          background: none;
          border: 0;
          border-radius: 0;

          &::after {
            display: none;
          }

          .el-tabs__nav {
            border-radius: 15px;
            overflow: hidden;
          }

          .el-tabs__item {
            font-size: 12px;
            height: 23px;
            line-height: 23px;
            padding: 0 17px;
            background-color: #2a375d;
            color: rgba(157, 199, 255, .4);

            &.is-active {
              background: #2357d7;
              color: #fff;

              &::after {
                display: none;
              }
            }
          }
        }
      }

      .el-row {

        .el-col {

          &:nth-child(2) {
            padding: 0 40px;

            .el-carousel {
              &>>>.el-carousel__container {
                width: 100%;
                height: 82px !important;
                background: url(~@/assets/image/ksh-carousel-bg.png) no-repeat;
                background-size: 100% 100%;

                button {
                  top: 17px;

                  i {
                    display: none;
                  }

                  &:nth-child(1) {
                    width: 14px;
                    height: 29px;
                    left: 50px;
                    background: url(~@/assets/image/ksh-carousel-left.png) no-repeat;
                    background-size: 100% 100%;
                  }

                  &:nth-child(2) {
                    width: 14px;
                    height: 29px;
                    right: 50px;
                    background: url(~@/assets/image/ksh-carousel-right.png) no-repeat;
                    background-size: 100% 100%;
                  }
                }
              }

              ul {
                margin: 0;
                display: flex;
                padding: 0 0 0 55px;
                justify-content: space-evenly;

                li {
                  list-style: none;
                  margin: 0;
                  float: left;

                  .value {
                    color: #fff;
                    font-size: 31px;
                    text-align: center;

                    span {
                      font-size: 15px;
                    }
                  }

                  .name {
                    color: #7da3ff;
                    font-size: 18px;
                  }
                }
              }

              @media screen and (max-width:1600px) {
                ul {
                  padding: 0 0 0 40px;
                }
              }
            }

            .distributeTime {
              p {
                font-size: 14px;
                color: #fff;
                display: inline-block;
                padding: 8px 15px;
                border-radius: 20px;
                background-color: #2357d7;
              }
            }
          }

          &:nth-child(3) {
            padding-left: 35px;
          }
        }
      }
    }

    .visual-ft {
      .el-table {
        border-radius: 0;
        background: #0d1841;
        font-family: '微软雅黑';
        margin-top: 20px;

        &::before {
          width: 100%;
          height: 1px;
          top: 0;
          background: url(~@/assets/image/ksh-table-line.png) no-repeat;
          background-size: 100% 100%;
        }

        &>>>tr {
          background: #0d1841;

          &:hover {
            background: #0d1841 !important;

            td {
              background: #0d1841 !important;
            }
          }

          &:nth-of-type(2n) {
            background: #142156 !important;

            &:hover td {
              background: #142156 !important;
            }
          }

          td {
            color: #fafcff;
            font-size: 12px;
            border: 0;
            padding: 4px 0;
            letter-spacing: 2px;

            .cell {
              opacity: .8;
            }
          }
        }

        &>>>.el-table__header-wrapper th,
        &>>>.el-table__fixed-header-wrapper th {
          border-bottom: 0;
          color: rgba(166, 204, 255, .7);
          font-size: 14px;
          opacity: .8;
          padding: 0;
          letter-spacing: 2px;
          background: #14245b;
        }
      }

      .el-pagination {
        &>>>.el-pagination__total {
          color: #fff;
        }

        &>>>.btn-prev,
        &>>>.btn-next {
          background-color: transparent;
          color: #3b73fe;

          &:disabled {
            color: #203393;
          }
        }

        &>>>.el-pager {
          li {
            background-color: #323e79;
            color: #fff;
            border-radius: 3px;

            &:not(:last-child) {
              margin-right: 10px;
            }

            &.active {
              background-color: #2357d7;
            }
          }
        }

        &>>>.el-pagination__jump {
          color: #fff;

          .el-input {
            width: 63px;

            .el-input__inner {
              background-color: #182765;
              border-color: #2357d7;
              color: #fff;
            }
          }

        }
      }

      .channel-select {
        margin-left: 10px;

        &>>>.el-input .el-input__inner {
          border-color: #2357d7;
          background-color: #111f4f;
          color: #789df6;
          height: 32px;
        }

        &>>>.el-select__caret {
          color: #00ffff;
        }
      }
    }

    .blockInfoDialog {
      margin-top: 10vh !important;

      .close {
        content: '';
        position: absolute;
        right: 2px;
        top: 2px;
        width: 35px;
        height: 33px;
        cursor: pointer;
        background: url(~@/assets/image/ksh-dialog-close-icon.png) no-repeat;
        background-size: 100% 100%;
      }

      &>>>.el-dialog {
        background: transparent;
        padding: 0;
        box-shadow: none !important;

        .el-dialog__header {
          display: none;
        }

        .el-dialog__body {
          width: 548px;
          /*height: 380px;*/
          background: url(~@/assets/image/ksh-dialog-bg.png) no-repeat;
          background-size: 100% 100%;
        }
      }

    }
  }

</style>
<style lang="scss">
  .select-down {
    background-color: #111f4f !important;
    border-color: #111f4f !important;

    .popper__arrow {
      border-bottom-color: #111f4f !important;

      &::after {
        border-top-color: #111f4f !important;
        border-bottom-color: #111f4f !important;
      }
    }

    .el-select-dropdown__list {
      li {
        color: #eee;

        &.hover {
          background-color: #2357d7;
        }
      }
    }
  }

</style>
